<template>
	<div class="scene-section">
		<van-pull-refresh
			class="refresh-section"
			v-model="isPullLoading" 
			@refresh="onRefresh"
		>
			<van-tabs
				class="scene-content"
				v-model="active"
				color="#3E9DFD"
				animated
				background="transparent"
			>
				<van-tab :title="waitTabTitle">
					<div 
						class="todo-list"
						v-if="waitServeList.length"
					>
						<van-swipe 
							class="todo-list-swipe"
							:show-indicators="true"
							:loop="false"
							:initial-swipe="swipeIndex"
							@change="handleSwipeChange"
						>
							<van-swipe-item 
								class="todo-list-item-wrap" 
								v-for="item in waitServeList" 
								:key="item.stId"
							>
								<div class="todo-list-item">
									<div 
										class="item-title"
										@click="handleMainServeDetailShow(item)"
									><span><em>主任务</em><b>{{item.mtId}}</b></span><i class="iconfont icon-arrow"></i></div>
									<div 
										class="content server-common-card"
										@click="handleShowSubServeDetail(item)"
									>
										<div class="serve-title"><span><em>子任务</em><b>{{item.stName}}</b></span></div>
										<div class="serve-content">
											<h3><span>任务描述</span></h3>
											<p>{{item.stContent}}</p>
											<h3><span>周期</span></h3>
											<span class="date"><b>{{item.createtime}}-{{item.createtime}}</b></span>
											<strong v-if="item.stFinishTime">最近一次执行时间：{{item.stFinishTime}}</strong>
										</div>
									</div>
								</div>
							</van-swipe-item>
							<template #indicator>
								<div class="custom-indicator">{{ swipeIndex + 1 }}/{{waitServeListPage.total}}</div>
							</template>
						</van-swipe>
					</div>
					<div 
						class="do-serve-btns"
						v-if="waitServeList.length"
					>
						<span @click="handleSendBack">退回</span>
						<span @click="handleCarryServe">执行</span>
					</div>
					<van-empty v-else description="没有待执行的服务,先休息休息" />
				</van-tab>
				<van-tab :title="doneTabTitle">
					<div 
						class="done-list"
						v-if="doneServeList.length"
					>
						<van-list
							v-model="doneServeListLoading"
							:finished="doneServeListFinished"
							finished-text="这就是我的底线"
							@load="onLoad"
						>
							<div 
								class="done-item server-common-card"
								v-for="item in doneServeList"
								:key="item.stId"
								@click="handleShowSubServeDetail(item)"
							>
								<div class="serve-title"><span><em>子任务</em><b>{{item.stName}}</b></span></div>
								<div class="serve-content">
									<h3><span>任务描述</span></h3>
									<p>{{item.stContent}}</p>
									<h3><span>主任务</span></h3>
									<div class="main-serve" @click.stop="handleMainServeDetailShow(item)">
										<span>{{item.mtId}}</span>
										<i class="iconfont icon-arrow"></i>
									</div>
									<h3><span>周期</span></h3>
									<span class="date"><b>{{item.createtime}}-{{item.createtime}}</b></span>
									<strong v-if="item.stFinishTime">最近一次执行时间：{{item.stFinishTime}}</strong>
								</div>
							</div>
						</van-list>
					</div>
					<van-empty v-else description="没有已执行服务,是不是没干活" />
				</van-tab>
			</van-tabs>
		</van-pull-refresh>
		<van-popup v-model="detailShow" round position="bottom" :style="{ height: '70%' }" >
			<div class="main-serve-detail server-common-card">
				<div class="serve-title"><span><em>主任务</em><b>{{currentMainServe.mtName}}</b></span></div>
				<div class="main-serve-desc">
					<div class="detail-item">
						<img src="../../assets/images/icon-user@2x.png" alt="">
						<span>{{currentMainServe.creator}}</span>
					</div>
					<div class="detail-item">
						<img src="../../assets/images/icon-date@2x.png" alt="">
						<span>{{currentMainServe.createtime}}</span>
					</div>
				</div>
				<div class="serve-content">
					<h3><span>任务描述</span></h3>
					<p>{{currentMainServe.mtContent}}</p>
					<h3><span>子任务</span></h3>
					<div class="sub-serve-info" @click="handleShowSubServeList">
						<span>{{`${currentMainServeCountJson.mine}/${currentMainServeCountJson.others}/${currentMainServeCountJson.total}`}}</span>
						<small>我执行/他人执行/总数</small>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex'
import {
	getServeListCount,
	getServeListByType,
	getMainServeInfo,
	getMainServeCount
} from "../../request/api"
export default {
	name:'',
	components: {},
	data() {
		return {
			isPullLoading: false,
			swipeIndex:0,
			active: 0,
			detailShow: false,
			waitTabTitle:"", //待执行标题
			doneTabTitle:"", //已执行标题
			waitServeListFinished: false,
			waitServeListPage:{
				page:1,
				pageSize:10,
				pages:0,
				total:0
			},
			doneServeListLoading: false,
			doneServeListFinished: false,
			doneServeListPage:{
				page:1,
				pageSize:10,
				pages:0,
				total:0
			}
		};
	},
	computed:{
		...mapState({
			loginid: state=>state.login.account.id,
			tabList: state=>state.serve.tabList,
			waitServeList: state=>state.serve.waitServeList,
			doneServeList: state=>state.serve.doneServeList,
			currentMainServe: state=>state.serve.currentMainServe,
			currentMainServeCount: state=>state.serve.currentMainServeCount,
			currentMainServeCountJson: state=>state.serve.currentMainServeCountJson,
		})
	},
	watch:{
		// 初始化tab标题
		tabList:function(value){
			const $this = this
			const waitCountData = value.filter(item=>item.finishType==="1")
			const doneCountData = value.filter(item=>item.finishType==="2")
			if(waitCountData.length){
				$this.waitTabTitle = `待执行(${waitCountData[0].count})`
			}else{
				$this.waitTabTitle = "待执行"
			}
			if(doneCountData.length){
				$this.doneTabTitle = `已执行(${doneCountData[0].count})`
			}else{
				$this.doneTabTitle = "已执行"
			}
		},
		currentMainServeCount:function(value){
			let total = 0
			let mine = 0
			let others = 0
			value.forEach(item=>{
				const currentValue = (+item.personCount)
				total += currentValue
				if(item.person === this.loginid){
					mine = currentValue
				}else{
					others += currentValue
				}
			})
			this.$store.commit("serve/setCurrentMainServeCountJson",{total,mine,others})
		},
		"$route":function(value){
			const from = value.query.from
			if(from==="sendback" || from==="carryServe"){
				this.handleGetServeCount()
				this.swipeIndex = 0
				this.handleGetWaitServeList({
					page:1,
					pageSize:this.waitServeListPage.pageSize
				})
			}

			if(from==="carryServe"){
				this.handleGetDoneServeList({
					page:1,
					pageSize:this.doneServeListPage.pageSize
				})
			}
		}
	},
	mounted(){
		this.handleGetServeCount()
		this.handleGetWaitServeList({
			page:1,
			pageSize:this.waitServeListPage.pageSize
		})
		this.handleGetDoneServeList({
			page:1,
			pageSize:this.doneServeListPage.pageSize
		})
	},
	methods: {
		// 上拉加载已执行列表
		onLoad(){
			if(this.doneServeListPage.page===1) return
			this.handleGetDoneServeList({
				page:this.doneServeListPage.page+1,
				pageSize:this.doneServeListPage.pageSize
			})
		},
		// 下拉刷新 
		async onRefresh(){
			// 获取任务数量
			await this.handleGetServeCount()

			// 待执行列表
			this.swipeIndex = 0
			await this.handleGetWaitServeList({
				page: 1,
				pageSize: this.waitServeListPage.pageSize
			})

			// 已执行列表
			await this.handleGetDoneServeList({
				page: 1,
				pageSize: this.doneServeListPage.pageSize
			})

			// 取消刷新
			this.isPullLoading = false
		},
		// 获取tab数据
		async handleGetServeCount(){
			const res = await getServeListCount({
				loginid:this.loginid
			})
			const resData = res.data
			const serveTab = resData.getTaskCount
			this.$store.commit("serve/setTabList",serveTab)
		},
		// 获取待执行列表数据
		async handleGetWaitServeList(pagination){
			if(pagination.page===1){
				this.waitServeListFinished = false
			}
			if(this.waitServeListFinished) return
			// 请求接口数据
			const res = await getServeListByType({
				...pagination,
				stPerson:this.loginid,
				stState:"1"
			})
			
			const resData = res.data

			// 修改分页数据
			this.waitServeListPage.page = resData.page
			this.waitServeListPage.pages = resData.pages
			this.waitServeListPage.total = resData.total

			// 修改vuex数据
			this.$store.commit("serve/setWaitServeList",{
				type:resData.page===1?"initial":"add",
				data:resData.data
			})
			// 判断是否请求全部数据
			this.waitServeListFinished = (resData.page === resData.pages)
		},
		// 待执行swipe
		handleSwipeChange(index){
			// console.log(index)
			this.swipeIndex = index
			const length = this.waitServeList.length
			if(index === length-1){
				this.handleGetWaitServeList({
					page:this.waitServeListPage.page+1,
					pageSize:this.waitServeListPage.pageSize
				})
			}
		},
		// 获取已执行列表数据
		async handleGetDoneServeList(pagination){
			if(pagination.page===1){
				this.doneServeListFinished = false
			}
			if(this.doneServeListFinished) return
			// 请求接口数据
			const res = await getServeListByType({
				...pagination,
				stPerson:this.loginid,
				stState:"2"
			})
			
			const resData = res.data

			// 修改分页数据
			this.doneServeListPage.page = resData.page
			this.doneServeListPage.pages = resData.pages
			this.doneServeListPage.total = resData.total

			// 修改vuex数据
			this.$store.commit("serve/setDoneServeList",{
				type:resData.page===1?"initial":"add",
				data:resData.data
			})
			// 判断是否请求全部数据
			this.doneServeListFinished = (resData.page === resData.pages)
		},
		// 弹出主任务详情弹窗
		async handleMainServeDetailShow(item){
			// console.log(item)
			const res01 =  await getMainServeInfo({
				mainServeId:item.mtId
			})
			this.$store.commit("serve/setCurrentMainServe",res01.data)
			const res02 =  await getMainServeCount({
				mainServeId:item.mtId,
				loginid:this.loginid
			})
			// console.log(res01,res02)
			this.$store.commit("serve/setCurrentMainServeCount",res02.data.personcount)
			this.$store.commit("serve/setOtherSubTaskList",res02.data.otherSubTaskList)
			this.$store.commit("serve/setOwnerSubTaskList",res02.data.ownerSubTaskList)
			this.detailShow = true
		},
		// 跳转到主任务下子任务列表页
		handleShowSubServeList(){
			this.$router.push({
				path:"subServe"
			})
		},
		// 跳转到子任务详情页面
		handleShowSubServeDetail(item){
			// console.log(item)
			this.$store.commit("serve/setCurrentSubServeInfo",item)
			this.$router.push({
				path:"subServeDetail"
			})
		},
		// 跳转到退回任务表单页面
		handleSendBack(){
			// 记录当前任务
			const index = this.swipeIndex
			const currentServe = this.waitServeList[index]
			this.$store.commit("serve/setUpdateServeItem",currentServe)

			// 跳转
			this.$router.push({
				path:"sendback"
			})
		},
		// 跳转到执行任务表单页面
		handleCarryServe(){
			// 记录当前任务
			const index = this.swipeIndex
			const currentServe = this.waitServeList[index]
			this.$store.commit("serve/setUpdateServeItem",currentServe)

			// 跳转
			this.$router.push({
				path:"carryServe"
			})
		}
	},
}
</script>
<style scoped lang="scss">
@import "../../assets/style/variable.scss";
.scene-section{
	height: 100%;
	background: $bg-gray;
	.refresh-section{
		height: 100%;
	}
	.scene-content{
		height: 100%;
		::v-deep .van-tabs__content{
			height: calc(100% - 44px);
			.van-tab__pane{
				height: 100%;
			}
		}
		.todo-list{
			box-sizing: border-box;
			padding: 30px 20px;
			height: calc(100% - 130px);
			.todo-list-swipe{
				.custom-indicator{
					text-align: center;
					font-size: 22px;
					margin-top: 10px;
					opacity: .6;
				}
				.todo-list-item-wrap{
					padding: 0 20px;
				}
				.todo-list-item{
					width: 100%;
					background: #fff;
					border-radius: 10px;
					overflow: hidden;
					.item-title{
						height: 120px;
						background: linear-gradient(to right,#007CDE,#38B2FF);
						@include flexCenter;
						justify-content: space-between;
						color: #fff;
						padding: 0 40px;
						span{
							@include flexCenter;
							em{
								font-size: 20px;
								border: 1px solid #fff;
								border-radius: 4px;
								padding: 1px 5px;
								margin-right: 5px;
							}
							b{
								font-size: 36px;
								font-weight: bold;
							}
						}
						i{
							font-size: 30px;
						}
					}
					.content{
						padding: 40px;
					}
				}
			}
		}
		.do-serve-btns{
			box-sizing: border-box;
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
			height: 90px;
			@include flexCenter;
			border-radius: 50px;
			overflow: hidden;
			span{
				width: 50%;
				height: 100%;
				font-size: 28px;
				background: #fff;
				@include flexCenter;
				border-right: 1px solid rgba(0,0,0,.1);
				transition: all ease .3s;
				&:active{
					background: $color-blue;
					color: #fff;
				}
			}
		}
		.done-list{
			padding: 30px;
			height: 100%;
			overflow: auto;
			.done-item{
				margin-bottom: 30px;
				background: #fff;
				border-radius: 10px;
				overflow: hidden;
				padding: 20px 50px 50px;
				.main-serve{
					@include flexCenter;
					justify-content: space-between;
				}
			}
		}
	}
	.main-serve-detail{
		padding: 30px 50px;
		.serve-title{
			margin-bottom: 0
		}
		.main-serve-desc{
			@include flexCenter;
			justify-content: flex-start;
			padding: 30px 0;
			margin-bottom: 30px;
			border-bottom: 1px solid rgba(0,0,0,.1);
			.detail-item{
				@include flexCenter;
				margin-right: 40px;
				img{
					display: block;
					width: 20px;
					margin-right: 10px;
				}
				span{
					font-size: 22px;
				}
			}
		}
		.sub-serve-info{
			@include flexCenter;
			background: #F2F2F2;
			height: 120px;
			flex-direction: column;
			border-radius: 10px;
			width: 60%;
			margin: 0 auto;
			span{
				font-size: 24px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			small{
				font-size: 22px;
			}
		}
	}
}
</style>